html {
  scroll-behavior: smooth;
}

.wrapper {
    width: 100%;
    /*height: 100vh;   responsive height */
    background-color: #f7edc0; 
    font-family: sans-serif; /* Use the same font family as your existing CSS */
}

.header {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    width: 100%; /* Ensure full width */
    transition: background-color 0.3s; /* Add transition for background color */
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 4px 0px;
}

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: white; /* Set background color for fixed header */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

/* Banner logo */
.header img {
    width: 350px; /* Adjust the width as needed */
    height: 270px; /* Maintain aspect ratio */
    margin-left: 10px;
}

 body {
            margin: 0; /* Remove default margin to ensure full width */
            padding: 0; /* Remove default padding */
        }

        /* Add a margin to the body to offset the fixed header */
        body.with-fixed-header {
            margin-top: 60px; /* Adjust the value based on your header height */
        }


/* Navigation button styles */
.col1 {
    display: flex; /* Make it a flex container */
    gap: 10px; /* Add space between buttons */
}

.col1 a {
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    text-decoration: none;
    text-shadow: 0.5px 0.5px gray;
    color: #016ea7;
    /*background-color: #4473c4;*/
    padding: 8px;
    border-radius: 4px;
    margin-right: 2px;
}

.col1 a:hover {
    transition-duration: 0.6s;
    color:black;
}


/* Image1 */
.row1 {
    position: relative;
    text-align: center;
    background-color: white;
    margin-bottom: -20px;
    height: 
}

/* Update the styles for .row1 img */
.row1 img {
    width: 100%;
    height: auto; /* Use 'auto' to maintain the aspect ratio */
    max-height: 100%; /* Ensure the image doesn't exceed the height of the swiper slide */
}

/* Promotional text */
.promo-text {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.promo-text p {
    font-size: 36px; /* Adjust the font size as needed */
    color: #fff; /* Adjust the text color */
    font-family: sans-serif; /* Use the same font family as your existing CSS */
    margin: 0;  
    text-shadow: #333f50 0.5px 0.5px ;
}


.col1 a#book {
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
    text-shadow: 0.5px 0.5px gray;
    color: #fff;
    background-color: #016ea7;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.6s; /* Add transition for background color */
}

.col1 a#book:hover {
    background-color: black;
    color: white;
}



.row2 h1{
    font-size: 26px; /* Adjust the font size as needed */
    color: black;
    text-align: left;
    margin-left: 30px;
}

.row2 {
  height: 360px;
  background-color: white;
  padding-top: 20px;
}

.row2 img {
  width: 250px;
  height: 250px;
  float: left;
  margin-left: 30px;
  margin-right: 10px;
  border-radius: 4px;
}

.promo-text2 {
  background-color: white;
  color: black;
  font-size: 18px;
  margin-top: 0; /* Adjust this value to remove the space gap */
  padding-right:2px;
}


.row3{
  height: 200px;
  padding: 30px 40px 60px 40px;
  background-color: #3d5a80;
  font-size: 18px;
  color: white;
}

.row3 a#book2 {
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    text-decoration: none;
    text-shadow: 0.5px 0.5px gray;
    color: #fff;
    background-color: #ee6d4d;
    padding: 6px;
    border-radius: 4px;
    transition: background-color 0.6s; /* Add transition for background color */
    text-shadow:none;
    font-weight: bold;
}

/* Services section */
.services-section {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 15px;
    background-color: #f7edc0;  

}

.services-title {
    font-size: 26px; /* Adjust the font size as needed */
    color: black;
    text-align: left;
    margin-left: 30px;
}

.services {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
}

.service-tile {
    text-align: center; /* Center the text */
    flex: 1;
    margin: 0 10px;
    font-size: 16px;
    border-radius: 6px;
    background-color: white;
    padding-bottom: 20px;
}

.service-tile ul {
    text-align: left; /* Align the items to the left */
}

.footer {
    background-color: #0E2339;
    color: white;
    padding: 18px;
    text-align: center;
}

#logofoot {
    width: 300px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

.social-icons img {
    width: 50px;
}

#fb img{
    width: 48.5px;
}

#insta img{
  margin-left: 10px;
}
.copyright {
    background-color: #016ea7;
    padding: 1px;
    text-align: center;
    color: white;
    font-size: 12px;
    /*text-shadow: 0.5px 0.5px white;*/
}


/*===============================*/
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  margin: auto;
}

/* Update the styles for .mySlides to cover the whole width */
.mySlides {
  display: none;
  width: 100%; /* Set width to 100% */
  height: 500px;

}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



 .grid {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .box {
        background: #FFF;
        color: #ggg;
        text-align: center;
        border-radius: 3px;
        width: 100%;
      }

      details {
        padding: 1em 1em 0;
      }

      summary {
        font-weight: bold;
        margin: -0.5em -0.5em 0;
        padding: 0.5em;
      }

      details[open] {
        padding: 1em;
      }

      details[open] summary {
        border-bottom: 1px solid #aaa;
        margin-bottom: 0.5em;
      }

#servicestitle{
  font-size:20px;
  }